<template>
  <div style="height: 100%">
    <navbar :title="$route.query.title"></navbar>
    <div class="content-noBottom">
      <div class="img-container">
        <img :src="appUrl + mapData.itmIcon" alt=""/>
        <div class="img-title">
          <p>{{mapData.learnerCount || 0}} {{$t('lab_learning')}}</p>
        </div>
      </div>
      <!--相关详情-->
      <div class="detail-container">
        <div >
          <span class="detail-title">{{$t('knowledge_type')}}：</span>
          <span>{{intrudeType[type]}}</span>
        </div>
          <div style="margin-top: 10px;">
              <span class="detail-title">{{$t('cos_app_status')}}：</span>
              <span style="color: #00ba5f;" v-if="mapData.learnerStatus === 'I'">{{ $t('cos_app_inprogress') }}</span>
              <span style="color: #0078f0;" v-else-if="mapData.learnerStatus === 'C'">{{ $t('cos_app_completed') }}</span>
              <span style="color: #666666;" v-else>{{ $t('cos_app_not_started') }}</span>
          </div>
        <div style="margin-top: 10px;display: flex;align-items: center;">
          <div style="margin-right: 10px">
            <span class="detail-title">{{$t('cos_inprogress_name')}}：</span>
            <span style="color: #0078f0;">{{mapDetail.learnerCheckpoint}}</span><span>/{{mapDetail.totalCheckpoint}}</span>
          </div>
          <div style="width: 60%">
            <van-progress style="width: 90%"
              color="#0078f0"
              :percentage="mapDetail.learnerCheckpoint && mapDetail.totalCheckpoint ? Math.round(mapDetail.learnerCheckpoint / mapDetail.totalCheckpoint * 100) : 0" />
          </div>
        </div>
      </div>
      <!-- 简介 -->
      <div class="catalog-container">
        <p class="catalog-title">{{$t('mod_desc')}}</p>
        <div v-html="$xss(itmDescHandler(mapData.itmDesc))"></div>
      </div>
      <!--闯关目录-->
      <div class="catalog-container">
        <p class="catalog-title">{{$t('study_map_catalog')}}</p>
        <div style="display: flex;flex-wrap: wrap" v-if="mapListData && mapListData.length >0">
          <template v-if="mapListData.length >0">
            <div  v-for="(item,index) in mapListData" :key="index" class="catalog-item" :class="statusObj(item.mapStatus)" @click="showCatalogCourse(item,index)">
            {{index +1}}
          </div>
          </template>
        </div>
          <div v-else>
              <div class="box-table" style="width:100%;height:100%;">
                  <div class="box-table-cell" style="text-align: center;">
                      <div class="no-data" >
                          <img src="../../../static/images/no-data.png" alt=""/>
                          <p class="color999">{{ $t("no_data") }}</p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!--地图渲染-->
      <div v-if="mapDetail.aimStencilInd === 1" style="margin-bottom: 50px; height: 42%;">
        <ul  v-if="mapType === 1" class="mapList plan1">
          <li>
            <img src="../../../static/images/map/plan3-01.png" alt="" />
          </li>
          <div v-for="(v,index) in level" :key="index" class="item-list">
            <li v-for="(item,i) in v" :key="i">
              <div class="tips" @click="showCatalogCourse(item,i)">
                <span class="state" :style="item.mapStatus===2?'color: #00ba5f':item.mapStatus===3?'color: #0078f0':'color: #999999;'">{{ levelState(item.mapStatus) }}</span>
                <span class="index">{{ index >=1 ? i+ index*8 : i+1  }}</span>
                <img v-if="item.mapStatus === 2 && mapData.learnerStatus !== 'C'"
                        src="../../../static/images/map/doing.png" />
                <img v-else-if="item.mapStatus === 3"
                        src="../../../static/images/map/plan3-finish.png" />
                <img v-else
                        src="../../../static/images/map/plan3-unlock.png" />
              </div>
              <img :src="imgList1[i]" alt="" />
            </li>
          </div>
        </ul>
        <ul v-if="mapType === 2" class="mapList plan2">
          <li>
            <img src="../../../static/images/map/plan2-01.png" alt="" />
          </li>
          <div v-for="(v,index) in level" :key="index" class="item-list">
            <li v-for="(item,i) in v" :key="i">
              <div class="tips" @click="showCatalogCourse(item,i,index)">
                <span class="state">{{ levelState(item.mapStatus) }}</span>
                <span class="index">{{ index >=1 ? i+ index*8 : i+1 }}</span>
                <img v-if="item.mapStatus === 2 && mapData.learnerStatus !== 'C'"
                    src="../../../static/images/map/plan2-doing.png" />
                <img v-else-if="item.mapStatus === 3"
                    src="../../../static/images/map/plan2-finish.png" />
                <img v-else
                    src="../../../static/images/map/plan2-unlock.png" />
              </div>
              <img :src="imgList2[i]" alt="" />
            </li>
          </div>

        </ul>
        <ul v-if="mapType ===3" class="mapList plan3">
          <li>
            <img src="../../../static/images/map/plan1-01.png" alt="" />
          </li>
          <div v-for="(v,index) in level" :key="index" class="item-list">
            <li v-for="(item,i) in v" :key="i">
              <div class="tips" @click="showCatalogCourse(item,i,index)">
                <span class="state">{{ levelState(item.mapStatus) }}</span>
                <span class="index">{{ index >=1 ? i+ index*8 : i+1  }}</span>
                <img v-if="item.mapStatus === 2 && mapData.learnerStatus !== 'C'"
                        src="../../../static/images/map/plan1-doing.png" />
                <img v-else-if="item.mapStatus === 3"
                        src="../../../static/images/map/plan1-finish.png" />
                <img v-else
                        src="../../../static/images/map/plan1-unlock.png" />
              </div>
              <img :src="imgList3[i]" alt="" />
            </li>
          </div>
        </ul>
      </div>
      <!--列表-->
      <div v-if="mapDetail.aimStencilInd === 0" style="background-color: #fff;padding-bottom:60px">
        <div v-for="(item,index) in mapListData" :key="index">
          <p style="font-weight: bold;padding: 15px 15px 8px;">{{$t('study_map_customs')}}{{index+1}}</p>
          <div class="list-container"   @click="showCatalogCourse(item,index)">
            <span>{{item.nodeTitle}}</span>
            <span class="list-status" :style="item.mapStatus===2?'color: #00ba5f':item.mapStatus===3?'color: #0078f0':'color: #999999;'">{{ levelState(item.mapStatus) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="set-dialog">
      <van-dialog v-model="selectCatalog" :show-confirm-button="false" :closeOnClickOverlay="true">
        <div class="dialog-container">
          <div class="dialog-title">
            <p class="title-p">{{$t('study_map_customs')}} {{customsNumber}}</p>
          </div>
          <template v-if="catalogList && catalogList.length > 0">
            <div  v-for="(item,index) in catalogList" :key="index">
            <div class="dialog-item-container" @click="jumpCourseDetail(item)">
              <van-icon name="description" size="22" style="margin-top: 5px" />
              <p>{{item.nodeTitle}}</p>
              <span @click.stop="exhibition(item)">{{$t('cos_module_detail')}}</span>
              <van-icon name="play-circle-o" size="22" color="#075ebb" class="item-icon"/>
            </div>
          </div>
          </template>
        </div>
      </van-dialog>
    </div>
    <div class="toast-box-03" v-if="assTip">
      <p class="toast-box-03-title">{{ tipsType }}</p>
    </div>
    <van-dialog
        v-model="tstErrorTips"
        :title="tipsType"
        :confirm-button-text="$t('sure')"
        >
    </van-dialog>
    <van-dialog
      v-model="examTip"
      show-cancel-button
      :title="examInfo ? examInfo.title : 'title'"
      :cancelButtonText="$t('cancel')"
      :confirm-button-text="$t('exam_start')"
      @confirm="startExam"
      class="exam-dialog"
      >
      <div style="font-size: 15px; color: #1a1a1a;margin-left: 20px;">
        <div>{{ $t("mod_topic_total") }}：{{examList.length}}</div><!--题目总数-->
        <div style="padding: 10px 0 0;">{{ $t("mod_total_score") }}：{{examInfo.maxScore}}</div><!--总分-->
        <div style="padding: 10px 0 0;word-wrap:break-word;">{{ $t("mod_time_limit") }}：{{ examInfo.timeLimit > 0 ? examInfo.timeLimit / 6000 : $t("mod_unlimited_time") }}</div><!--限时/不限时-->
      </div>
    </van-dialog>
    <!--课件详情-->
    <div class="set-dialog">
      <van-dialog v-model="exhibitionSwitch" :title="exhibitionTitle" :show-confirm-button="false" :closeOnClickOverlay="true" v-if="exhibitionSwitch">
        <div class="exhibition-container">
          <course-exhibition :item="exhibitionData" ></course-exhibition>
        </div>
      </van-dialog>
    </div>
    <common-loading :isLoading="isLoading"></common-loading>
    <div class="sendComment" >
      <div class="detail-voting" v-if="freshQuery">
        <span @click="like({type: 'Course', id: itmId, isClick: ifLick})" :class="{'cur': ifLick}" class="commentFoot-like">{{ likeCount ? likeCount : 0}}</span>
        <span @click="collection({type: 'Map', id: itmId, isClick: ifCollect})" :class="{'cur': ifCollect}"
              class="commentFoot-collection"
              id="collection">
                {{collectCount ? collectCount : 0}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
import { Progress, Dialog, Icon, Notify, Toast } from 'vant';
import courseExhibition from '@/repeatComponents/courseExhibition/courseExhibition';
const planThree2 = require('../../../static/images/map/plan3-02.png');
const planThree3 = require('../../../static/images/map/plan3-03.png');
const planThree4 = require('../../../static/images/map/plan3-04.png');
const planThree5 = require('../../../static/images/map/plan3-05.png');
const planThree6 = require('../../../static/images/map/plan3-06.png');
const planThree7 = require('../../../static/images/map/plan3-07.png');
const planThree8 = require('../../../static/images/map/plan3-08.png');
const planTwo2 = require('../../../static/images/map/plan2-02.png');
const planTwo3 = require('../../../static/images/map/plan2-03.png');
const planTwo4 = require('../../../static/images/map/plan2-04.png');
const planTwo5 = require('../../../static/images/map/plan2-05.png');
const planTwo6 = require('../../../static/images/map/plan2-06.png');
const planTwo7 = require('../../../static/images/map/plan2-07.png');
const planTwo8 = require('../../../static/images/map/plan2-08.png');
const planOne2 = require('../../../static/images/map/plan1-02.png');
const planOne3 = require('../../../static/images/map/plan1-03.png');
const planOne4 = require('../../../static/images/map/plan1-04.png');
const planOne5 = require('../../../static/images/map/plan1-05.png');
const planOne6 = require('../../../static/images/map/plan1-06.png');
const planOne7 = require('../../../static/images/map/plan1-07.png');
const planOne8 = require('../../../static/images/map/plan1-08.png');
export default {
    name: 'detail',
    components: {[Progress.name]: Progress, 'van-dialog': Dialog.Component, [Icon.name]: Icon, [Notify.Component.name]: Notify.Component, courseExhibition, vanToast: Toast},
    mixins: [mixin],
    data() {
        return {
            mapData: {}, //详情数据
            mapListData: [], //课程列表数据
            mapType: 0, //背景地图   1 - 雨林冒险 2 - 夏季海岛 3- urban-crisis
            selectCatalog: false, //选择目录
            type: 0, //闯关和非闯关
            mapDetail: {},
            progress: 0, //进度
            customsNumber: 0, //关卡
            catalogList: [], //选择的目录数据
            level: [], //处理后的循环数据
            isLoading: false,
            hasApply: false, //已经报过名了
            assTip: false, //跳转前提示
            tipsType: '',
            tstErrorTips: false, //阻止跳转提示
            tkhId: 0,
            examInfo: {}, //考试信息
            examTip: false,
            examList: [], //试题信息
            itmId: this.$route.query.itmId,
            userEntId: window.localStorage.getItem('loginUser'),
            exhibitionTitle: '',
            exhibitionSwitch: false,
            exhibitionData: {},
            isTkhLoading: false, //是否在报名
            imgList1: [
                planThree2,
                planThree3,
                planThree4,
                planThree5,
                planThree6,
                planThree7,
                planThree8
            ],
            imgList2: [
                planTwo2,
                planTwo3,
                planTwo4,
                planTwo5,
                planTwo6,
                planTwo7,
                planTwo8
            ],
            imgList3: [
                planOne2,
                planOne3,
                planOne4,
                planOne5,
                planOne6,
                planOne7,
                planOne8
            ],
            questionType: '',
            freshQuery: {},
            ifLick: false,
            ifCollect: false,
            collectCount: 0,
            likeCount: 0
        };
    },
    computed: {
        //0-未解锁,1-待开启,2-进行中,3-已完成
        statusObj() {
            return function(status) {
                let flag;
                switch (status) {
                case 0:
                    flag = 'unlock';
                    break;
                case 1:
                    flag = 'stayOpen';
                    break;
                case 2:
                    flag = 'runing';
                    break;
                case 3:
                    flag = 'complete';
                    break;
                }

                return flag;
            };
        },
        // 进度条忽略小数
        checkProgress() {
            return function(progress) {
                return progress.toFixed(0);
            };
        },
        itmDescHandler() {
            return (itmDesc) => {
                if (!itmDesc) {
                    return '';
                }
                let desc = itmDesc;
                desc = desc.replace(/<img/g, "<img style='width: 100%;height: auto;'");
                desc = desc.replace(/<video/g, "<video style='width: 100%;height: auto;'");
                desc = desc.replace(/\n/g, '</br>');
                return desc;
            };
        }
    },
    methods: {
        //获取地图数据
        getMapData() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/detail`,
                params: {
                    itmId: this.$route.query.itmId,
                    mobileInd: 1
                }
            }).then(res => {
                if (res && res.status === 200) {
                    this.isLoading = false;
                    this.tkhId = res.data.appTkhId;
                    this.mapData = res.data;
                    this.mapListData = res.data.contentList;
                    this.level = this.mapBackground(res.data.contentList);
                    this.mapType = res.data.mapCourseDetailDTO.gameMapId;
                    this.type = res.data.mapCourseDetailDTO.aimEntryModeInd;
                    this.mapDetail = res.data.mapCourseDetailDTO;
                    this.progress = res.data.progress;
                    this.hasApply = res.data.appTkhId;
                }
            });
        },
        //弹出课程列表内容
        showCatalogCourse(item, index, page) {
            //先为学员报名
            if (!this.mapData.appId) {
                this.submitApply();
            }
            //判断是否是闯关模式
            //判断前面的章节是否通过   0-未解锁,1-待开启,2-进行中,3-已完成
            if (this.type === 1 && index !== 0) {
                let status = this.mapListData[index - 1].mapStatus;
                if (status !== 3) {
                    Notify({
                        message: this.$t('study_map_learning_next'),
                        color: '#fff',
                        background: '#ffc002'
                    });
                    return false;
                }
            }
            //弹框展示 item里面的内容
            if (item.childList) {
                this.selectCatalog = true;
                this.customsNumber = (page ? page * 7 : 0) + index + 1;
                this.catalogList = item.childList ? item.childList : [];
            } else {
                Notify({
                    message: this.$t('study_map_no_data'),
                    color: '#fff',
                    background: '#ffc002'
                });
            }
        },
        //课程详情跳转
        jumpCourseDetail(data) {
            this.selectCatalog = false;
            if (data.nodeType === 4) {
                this.$router.push(`/course/${data.traineeAeitemMapDTO.itmId}/0`);
                return;
            }
            if (this.mapData.appTkhId !== null && this.hasApply) {
                this.start(data);
            } else {
                this.submitApply(data);
            }
            //跳转详情 分类型
        },
        startExam() {
            this.$axios({
                url: `/app/exam/module/accessTime`,
                method: 'PUT',
                params: {
                    modId: this.examInfo.id
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.$router.push({path: `/exam/${this.tkhId}/${this.examInfo.id}/${this.itmId}`, query: {questionType: this.questionType}});
                } else if (res.data.code === 401) {
                    this.assTip = true;
                    this.tipsType = this.$t('cos_num_of_attempts'); //尝试次数已用完
                } else if (res.data.code === 402) {
                    this.assTip = true;
                    this.tipsType = this.$t('has_deleted_learning_record'); //报名记录被删除
                } else {
                    //判断考试是否暂停
                    this.$axios({
                        method: 'PUT',
                        url: `/app/exam/module/accessTime`
                    }).then(res => {
                        if (res.data) { //为true 则被强制暂停
                            Notify({
                                message: this.$t('forced_to_suspend'),
                                color: '#fff',
                                background: '#ffc002'
                            });
                            return false;
                        } else {
                            this.$router.push({path: `/exam/${this.tkhId}/${this.examInfo.id}/${this.itmId}`, query: {questionType: this.questionType}});
                        }
                    });
                }
            });
        },
        submitApply(data) {
            if (this.isTkhLoading) {
                Notify({
                    message: this.$t('system_sign_try_again'),
                    color: '#fff',
                    background: '#ffc002'
                });
            } else {
                if (this.mapData.appTkhId === null && !this.hasApply) {
                    this.isTkhLoading = true;
                    this.$axios({
                        method: 'POST',
                        url: `/app/api/trainee/course/sign-in`,
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        data: JSON.stringify(this.mapData.itmId)
                    }).catch(err => {
                        Notify({
                            message: err.response.data.errorMsg || err.response.data.errMsg,
                            color: '#fff',
                            background: '#ffc002'
                        });
                        this.isTkhLoading = false;
                    }).then(res => {
                        this.hasApply = true;
                        this.tkhId = res.data.results.appTkhId;
                        this.mapData.appTkhId = this.tkhId;
                        this.questionType = res.data.questionType;
                        this.isTkhLoading = false;
                    });
                }
            }
        },
        /**
         * 地图模式背景循环
         * */
        mapBackground(list) {
            const arr = list;
            const len = arr && arr.length;
            const n = 7;
            const lineNum = len % 7 === 0 ? len / 7 : Math.floor((len / 7) + 1);
            const res = [];
            for (let i = 0; i < lineNum; i++) {
                const temp = arr.slice(i * n, i * n + n);
                res.push(temp);
            }
            return res;
        },
        /**
         * 关卡状态过滤---文字改变
         * */
        levelState(value) {
            switch (value) {
            case 0:
                return this.$t('lock');
            case 1:
                return this.$t('open');
            case 2:
                return this.$t('doing');
            case 3:
                return this.$t('completed');
            }
        },
        start(detail) {
            let nowDate = new Date().getTime();
            let type = detail.moduleBaseDTO.modType;
            let data = detail.moduleBaseDTO;
            let judge = detail.traineeTestDetailDTO;
            /*时间超过的时候*/
            if (nowDate < this.conversionTime(data.beginTime) || nowDate > this.conversionTime(data.endTime)) {
                this.assTip = true;
                this.tipsType = this.$t('mod_end_notice'); //该网上内容已经结束或未开始
                setTimeout(() => {
                    this.assTip = false;
                }, 3000);
                return false;
            }
            switch (type) {
            case 'ASS':
                if (this.coloring(type, judge, data.modAssSubmit)) {
                    this.tstErrorTips = true;
                    this.tipsType = this.$t('mod_tips_2'); //您的作业已提交，不可重复提交
                    return false;
                }
                this.$router.push({path: `/assWork/${this.tkhId}/${data.moduleId}/${this.itmId}`});
                break;
            case 'DXT':
            case 'TST':
                if ((data.movStatus && (data.movStatus === 'C' || data.movStatus === 'P'))) {
                    this.tstErrorTips = true;
                    this.tipsType = this.$t('mod_tips_3'); //测验已合格，不能再进行测验
                } else if (this.coloring()) { //已达到最大允许打开次数 或者已经提交
                    this.tstErrorTips = true;
                    this.tipsType = this.$t('mod_tips_4'); //您的「允许打开次数」或「允许提交次数」已用完，不能再进行测验
                } else {
                    this.isLoading = true;
                    this.$axios({
                        method: 'GET',
                        url: `/app/module/check-test-prev`,
                        params: {
                            modId: data.moduleId
                        }
                    }).then(res => {
                        //会返回次数和测试时间是否结束的标志
                        if (res.data.modStartedInd) {
                            this.$axios({
                                method: 'GET',
                                url: `/app/exam/cache/info`,
                                params: {
                                    examId: data.moduleId,
                                    subId: 0
                                }
                            }).then(res => {
                                this.isLoading = false;
                                this.examTip = true;
                                this.examList = res.data.questions;
                                this.examInfo = res.data;
                                this.questionType = res.data.questionType;
                            });
                        }
                    });
                }
                break;
            case 'RDG': //教材
                this.jumpModuleDetail(data);
                break;
            case 'VOD': //视频点播
                this.jumpModuleDetail(data);
                break;
            case 'AUD': //音频
                this.jumpModuleDetail(data);
                break;
            case 'SCO': //scorm课件
                this.jumpModuleDetail(data);
                break;
            case 'REF': //参考
                this.jumpModuleDetail(data);
                break;
            case 'SCLASS': //微课
                this.jumpModuleDetail(data);
                break;
            case 'SVY': //课程评估问卷
                //if (!mov || (mov && mov.mov_status !== 'C' && mov.mov_status !== 'P')) {
                if ((data.movStatus !== 'C' && data.movStatus !== 'P')) {
                    this.$router.push({path: `/detail/${data.moduleId}/course`});
                } else if (data.movStatus === 'C') {
                    this.tstErrorTips = true;
                    this.tipsType = this.$t('mod_tips_7'); //您已经提交了该课程评估问卷
                }
                break;
            case 'ACE': //课后调查问卷
                if ((data.movStatus !== 'C' && data.movStatus !== 'P')) {
                    this.$axios({
                        url: `/app/api/course/after-class/questionnaire/type`,
                        method: 'GET',
                        params: {resId: data.moduleId}
                    }).then(res => {
                        if (res.status === 200) {
                            if (res.data === true) {
                                this.$router.push({path: `/aceDetail`, query: {itmId: this.itmId, modId: data.moduleId, operation: 2}});
                            } else {
                                this.$router.push({path: `/unitList/${this.itmId}/${data.moduleId}`});
                            }
                        }
                    });
                } else if (data.movStatus === 'C') {
                    this.tstErrorTips = true;
                    this.tipsType = this.$t('mod_tips_7'); //您已经提交了该课程评估问卷
                }
                break;
            }
        },
        jumpModuleDetail(data) {
            switch (data.modType) {
            case 'SCLASS':
                // 微课  this.$router.push({path: `/sclassContent/${this.tkhId}/${courseItmId}/${this.resId}/${this.courseResource.moduleId}`});
                this.$router.push({path: `/sclassContent/${this.tkhId}/${this.itmId}/${data.moduleId}/${data.moduleId}`});
                break;
            case 'RDG':
                this.$router.push({path: `/teachingMaterial/${this.userEntId}/${this.tkhId}/${this.itmId}/${data.moduleId}/${data.moduleId}`});
                break;
            case 'VOD':
                this.$router.push({path: `/vodContent/${this.tkhId}/${this.itmId}/${data.moduleId}/${data.moduleId}/${this.userEntId}`});
                break;
            case 'AUD':
                this.$router.push({path: `/vodContent/${this.tkhId}/${this.itmId}/${data.moduleId}/${data.moduleId}/${this.userEntId}`});
                break;
            case 'REF':
                this.$router.push({path: `/refContent/${this.userEntId}/${this.tkhId}/${this.itmId}/${data.moduleId}/${data.moduleId}`});
                break;
            case 'SCO':
                this.$router.push({path: `/scoPlayer/${this.userEntId}/${this.itmId}/${this.tkhId}/${data.moduleId}`});
                break;
            }
        },
        coloring(type, data, modAssSubmit) {
            switch (type) {
            case 'TST':
                //已到最大提交次数或最大打开次数
                if ((data && data.maxUsrAttempt !== 0 && data.totalAttempt >= data.maxUsrAttempt) || ((data.maxUsrOpen !== 0 && data.totalOpen >= data.maxUsrOpen))) {
                    return true;
                }
                break;
            case 'ASS':
                /*如果有提交时间*/
                if (modAssSubmit) {
                    return true;
                }
            }
        },
        exhibition(item) {
            this.exhibitionSwitch = false;
            //弹框展示 详情内容
            if (item.nodeType === 4) {
                this.exhibitionData = item.traineeAeitemMapDTO;
            } else {
                this.exhibitionData = item.moduleBaseDTO;
            }
            this.exhibitionSwitch = true;
            this.exhibitionData.nodeType = item.nodeType;
            this.exhibitionData.itemId = this.itemId || this.$route.query.itemId;
            this.exhibitionData.tkhId = this.tkhId;
            // this.$set(this.exhibitionData, 'itmStatus', '');
        },
        /*获取点赞相关信息*/
        getLikeCount() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/sns-count`,
                params: {
                    itmId: this.itmId
                }
            }).then((res) => {
                if (res && res.status === 200) {
                    this.freshQuery = res.data;
                    this.ifLick = res.data.isLike;
                    this.ifCollect = res.data.isCollect;
                    this.collectCount = res.data.collectCount;
                    this.likeCount = res.data.likeCount;
                }
            });
        },
        /**
         * @name 点赞
         */
        like(binding) {
            let isClick = binding.isClick;
            if (isClick) {
                this.$axios({
                    method: 'POST',
                    url: `/app/api/valuation/like`,
                    data: {
                        targetId: Number(binding.id),
                        typeEnum: binding.type.toUpperCase(),
                        isLike: false,
                        isComment: false
                    }
                }).then(res => {
                    if (res.data.errCode === 'success') {
                        this.$toast(this.$t('circle277'));
                        this.getLikeCount();
                    }
                });
            } else {
                this.$axios({
                    method: 'POST',
                    url: `/app/api/valuation/like`,
                    data: {
                        targetId: Number(binding.id),
                        typeEnum: binding.type.toUpperCase(),
                        isLike: true,
                        isComment: false
                    }
                }).then(res => {
                    if (res.data.errCode === 'success') {
                        this.$toast(this.$t('circle276'));
                        this.getLikeCount();
                    }
                });
            }
        },
        /**
         *@name 收藏
         *@param {binding}
         *@type {object}
         */
        collection(binding) {
            let isClick = binding.isClick;
            if (isClick) {
                this.$axios({
                    method: 'DELETE',
                    url: `/app/api/collect`,
                    params: {
                        targetId: Number(binding.id),
                        module: binding.type.toUpperCase()
                    }
                }).then(res => {
                    if (res.data.errCode === 'success') {
                        this.$toast(this.$t('cancel_collect_success'));
                        this.getLikeCount();
                    }
                }).catch(() => {

                });
            } else {
                this.$axios({
                    method: 'POST',
                    url: `/app/api/collect`,
                    params: {
                        targetId: Number(binding.id),
                        module: binding.type.toUpperCase()
                    }
                }).then(res => {
                    if (res.data.errCode === 'success') {
                        this.$toast(this.$t('collect_success'));
                        this.getLikeCount();
                    }
                }).catch(() => {

                });
            }
        }
    },
    mounted() {
        this.getMapData();
        this.getLikeCount();
    }
};
</script>

<style scoped lang="less">
  .img-container{
    width: 100%;
    height: 228px;
    background: #c9c9c9;
    position: relative;
    .img-title{
      position: absolute;
      bottom: 0;
      width: 100%;
      background-color: rgba(0,0,0,0.3);
      color: #ffffff;
      text-align: center;
      line-height: 29px;
      font-size: 12px;
    }
     img {
       width: 100%;
       height: 100%;
    }
  }
  .detail-container{
    background-color: #ffffff;
    width: 100%;
    padding: 15px;
    font-size: 12px;
    .detail-title{
      font-weight: bold;
    }
  }
  .catalog-container{
    background-color: #fff;
    margin-top: 12px;
    padding: 20px 15px;
    .catalog-title{
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 20px
    }
    .catalog-item{
      width: 45px;
      margin-right: 10px;
      &:nth-child(5n){
        margin-right: 0;
      }
      height: 45px;
      font-size: 15px;
      line-height: 45px;
      text-align: center;
      border-radius: 5px;
      color:#fff;
    }
  }
  /*弹出框*/
  .dialog-container{
    width: 100%;
    min-height: max-content;
    .dialog-title{
      background-color: #f3f3f3;
      width: 100%;height: 30px;
      .title-p{
        padding: 5px 0 5px 15px;
        font-size: 16px;
        font-weight: bold
      }
    }
    .dialog-item-container{
      display: flex;
      margin: 15px 12px 15px 12px;
      background-color: #f3f3f3;
      line-height: 30px;
      .item-icon{
        width: 25px;
        text-align: right;
        margin-top: 5px
      }
      >p{
        margin-left: 10px;
        width: 140px;  /*设置宽度*/
        white-space: nowrap;  /*强制不换行*/
        overflow: hidden;  /*溢出隐藏*/
        text-overflow: ellipsis; /*以省略号...显示*/
      }
      >span{
        padding: 0 15px;
        color: #075ebb;
      }
    }
  }
  /*地图模式*/
  .mapList {
    li {
      position: relative;
      img {
        display: block;
        width: 100%
      }
      > .tips {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        > img {
          width: 100%;
        }
        > span {
          position: absolute;
          z-index: 2;
        }
      }
    }
  }
  .plan2 {
    .tips {
      width: 50px;
      height: 30px;
      .state {
        top: -20px;
        left: 45%;
      }
      .index {
        top: 8px;
        left: 50%;
      }
      > span {
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        color: #4e776f;
      }
    }
    .item-list {
      > li:nth-child(1) {
        .tips {
          left: 32%;
        }
      }
      > li:nth-child(2) {
        .tips {
          left: 62%;
        }
      }
      > li:nth-child(3) {
        .tips {
          left: 11%;
        }
      }
      > li:nth-child(4) {
        .tips {
          left: 62%;
          top: 50%;
        }
      }
      > li:nth-child(5) {
        .tips {
          left: 30%;
          top: 50%;
        }
      }
      > li:nth-child(6) {
        .tips {
          left: 53%;
          top: 50%;
        }
      }
      > li:nth-child(7) {
        .tips {
          left: 35%;
        }
      }
    }
  }
  .plan1 {
    .tips {
      width: 70px;
      height: 50px;
      .state {
        top: 2px;
        left: 45%;
        color:  floralwhite;
        font-size: 12px;
        font-weight: 600;
      }
      .index {
        top: 20px;
        left: 43%;
        font-size: 13px;
      }
      > span {
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        color: #d9d9de;
      }
    }
    .item-list {
      > li:nth-child(1) {
        .tips {
          left: 48%;
        }
      }
      > li:nth-child(2) {
        .tips {
          left: 56%;
        }
      }
      > li:nth-child(3) {
        .tips {
          left: 48%;
        }
      }
      > li:nth-child(4) {
        .tips {
          left: 40%;
          top: 61%;
        }
      }
      > li:nth-child(5) {
        .tips {
          left: 17%;
          top: 80%;
        }
      }
      > li:nth-child(6) {
        .tips {
          left: 17%;
          top: 80%;
        }
      }
      > li:nth-child(7) {
        .tips {
          left: 30%;
          top: 70%;
        }
      }
    }
  }
  .plan3 {
    .tips {
      width: 70px;
      height: 50px;
      .state {
        top: 20px;
        left: 37%;
        font-size: 12px;
      }
      .index {
        top: 5px;
        left: 37%;
        font-size: 13px;
      }
      > span {
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        color: #f4f4f4;
      }
    }
    .item-list {
      > li:nth-child(1) {
        .tips {
          left: 30%;
        }
      }
      > li:nth-child(2) {
        .tips {
          left: 56%;
        }
      }
      > li:nth-child(3) {
        .tips {
          left: 20%;
        }
      }
      > li:nth-child(4) {
        .tips {
          left: 65%;
          top: 61%;
        }
      }
      > li:nth-child(5) {
        .tips {
          left: 25%;
          top: 61%;
        }
      }
      > li:nth-child(6) {
        .tips {
          left: 55%;
          top: 60%;
        }
      }
      > li:nth-child(7) {
        .tips {
          left: 15%;
          top: 60%;
        }
      }
    }
  }
  .list-container{
    padding: 15px;
    background-color: #f6f6f6;
    display: flex;
    .list-status{
      flex: 1;
      text-align: right
    }
    span{
      margin: 0 5px;
    }
  }
  //0-未解锁,1-待开启,2-进行中,3-已完成
  .unlock {
    background-color: #999999;
  }
  .stayOpen {
    background-color: #999999;
  }
  .runing{
    background-color: #00ba5f;
  }
  .complete{
    background-color: #0078f0;
  }
  .exhibition-container{
    height: max-content;
    width: 100%;
    min-height: 50px;
  }
  .exam-dialog {
      /deep/.van-dialog__header {
          font-size: 20px;
          text-align: initial;
      }
  }
  .set-dialog {
    /deep/.van-dialog__content {
      padding: 0;
    }
  }
        /*发布评论*/
.sendComment {
  /* display: flex; */
  justify-items: center;
  align-items: center;
  position: fixed;
  bottom: 0px;
  height: 60px;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #dddddd;
  flex-wrap: nowrap;
  z-index: 98;
}
.detail-voting{
    padding: 0;
    display: flex;
    width: 100%;
    overflow: hidden;
}
.detail-voting span{
    /* width: calc(100% / 3); */
    width: 50%;
    color: #666666;
    display: flex;
    align-items: center;
    flex-flow: column;
}
.detail-voting{
    position: relative;
    bottom: -15px;
    z-index: 999;
}
.exam-dialog {
    /deep/.van-dialog__header {
        font-size: 20px;
        text-align: initial;
        padding: 30px 40px 20px;
    }
}
</style>
